<template>
  <basic-dialog
    :visible="dialogFormVisible"
    :title="'新增商品关键词'"
    :handle-close="dialogBoxToCancelTheButton"
    :handle-ok="submitForm"
  >
    <el-form :model="keywordsForm" :rules="rules" ref="keywordsForm">
      <el-form-item label="商品关键词:" prop="searchKeyword">
        <el-input v-model.trim="keywordsForm.searchKeyword" ></el-input>
      </el-form-item>
    </el-form>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
export default {
  components: { BasicDialog },
  data () {
    // 校验全角字符
    const qjzf = (rule, value, callback) => {
      for (var i = 0; i < value.length; i++) {
        let strCode = value.charCodeAt(i);
        if ((strCode > 65248) || (strCode == 12288)) {
          callback(new Error('禁止输入全角字符与中文标点符号'))
        }
      }
      callback()
    }
    // 校验空格字符
    const kg = (rule, value, callback) => {
      let reg = /^[^\s]*$/;
      if (!reg.test(value)) {
        callback(new Error('禁止输入空格'))
      }
      callback()
    }
    // 校验中文标点符号
    const zwfh = (rule, value, callback) => {
      let reg = /[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/;
      let reg1 = ['·', '~', '【', '】', '{', '}', '“', '”', '…', '—', '、', '‘', '’', '，', '。', '？', '《', '》']
      for (var i = 0; i < value.length; i++) {
        if (reg1.includes(value[i]) || reg.test(value[i])) {
          callback(new Error('禁止输入全角字符与中文标点符号和空格'))
        }
      }
      callback()
    }
    return {
      // 新增字符弹窗隐藏
      dialogFormVisible: false,
      // 新加关键词
      keywordsForm: {
        searchKeyword: '',
      },
      // 新加关键词验证
      rules: {
        searchKeyword: [
          { required: true, message: '请输入商品关键词', trigger: 'blur' },
          { validator: qjzf, trigger: 'blur' },
          { validator: zwfh, trigger: 'blur' },
          { validator: kg, trigger: 'blur' },
          { min: 2, max: 50, message: '长度至少2个字符', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
    // 对话框取消按钮
    dialogBoxToCancelTheButton () {
      this.dialogFormVisible = false;
      this.$refs.keywordsForm.resetFields();
    },
    // 对话框确定按钮
    submitForm () {
      this.$refs.keywordsForm.validate((valid) => {
        if (valid) {
          this.$emit('listenToChildEvent', this.keywordsForm.searchKeyword.toLowerCase())
          this.$refs.keywordsForm.resetFields();
        } else {
          this.$message.warning('请正确填写关键词名称');
        }
      });
    },
  }
}
</script>
